<template>
    <div class="title">考核方式申报</div>
    
    <div class="list">
        <span>我的课程：</span>
        <template v-if="isListLoad">
            <el-table :data="courseTableData" border style="width: 100%">
                <el-table-column prop="departmentName" label="开课单位" width="230"/>
                <el-table-column prop="courseId" label="课程编号" width="180"/>
                <el-table-column prop="courseName" label="课程名称"/>
                <el-table-column prop="courseHour" label="总学时"/>
                <el-table-column prop="credits" label="学分"/>
                <el-table-column prop="type" label="课程类别"/>
                <el-table-column prop="" label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="handleBrowse(scope.row.courseId,scope.row.courseName)">
                            申报考核方式
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    
    
    <template v-if="isFormLoad">
        <div class="option">
            <div class="title" style="margin-top: 50px">课程申报:</div>
            <span style="margin-left: 200px">课程信息:  </span>
            <el-input v-model="info" style="width: 300px" disabled></el-input>
            
            <span style="margin-left: 50px">申报方式: </span>
            <el-select
                v-model="value"
                :empty-values="[null, undefined]"
                :value-on-clear="null"
                placeholder="Select"
                style="width: 240px"
                @change="selectionChange"
            >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-button style="margin-left: 20px" type="primary" @click="handleClick">申报</el-button>
        
        </div>
    </template>

</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getTeacherAssessmentMethod, getTeacherCourseStandard} from "@/service/teacher/teacher.service";
import {ElMessage} from "element-plus";

const value = ref('')
const options = ref([{
    value: '',
    label: '全部'
}])
const isListLoad = ref(false)
const isFormLoad = ref(false)
const courseTableData = ref([])
const info = ref('')


onMounted(() => {
    getTeacherCourseStandard((data: any) => {
        let courseIdList: string[] = ['']
        // 当前教师课程列表
        console.log(data)
        let teacherCourseStandardList = data.teacherCourseStandardList
        for (const teacherCourseStandard of teacherCourseStandardList) {
            // 重复课程判断
            if (!courseIdList.includes(teacherCourseStandard.courseId)) {
                courseIdList.push(teacherCourseStandard.courseId)
                courseTableData.value.push(teacherCourseStandard)
            }
        }
    })
    
    isListLoad.value = true
})

function handleBrowse(courseId: string, courseName: string) {
    isFormLoad.value = true
    //初始化数据
    
    info.value = '[' + courseId + ' ] ' + courseName
    
    getTeacherAssessmentMethod((data: any) => {
        console.log('OK')
        
        let assessmentMethodList = data.teacherAssessmentMethodList
        console.log(assessmentMethodList)
        if (options.value.length === 1) {
            for (const assessmentMethod of assessmentMethodList) {
                options.value.push({
                    value: assessmentMethod.methodId,
                    label: `[${assessmentMethod.methodId}]  ${assessmentMethod.name}`,
                })
            }
        }
    })
}

function selectionChange(val: any) {
    value.value = val
}


function handleClick() {
    if (value.value === '') {
        ElMessage({
            message: "请选择考核方式",
            type: "error",
            duration: 3000
        });
    } else {
        ElMessage({
            message: "申报成功",
            type: "success",
            duration: 3000
        });
        setTimeout(function () {
            location.reload();
        }, 550)
    }
    
    
}


</script>


<style scoped>
.title {
    font-size: 20px;
    margin-bottom: 10px;
}

.option {
    margin-bottom: 20px;
}

.el-col {
    text-align: center;
}
</style>